<template>
<div>
    <div class="search">
         <input type="text" class="search-input" placeholder="输入城市名或拼音" v-model="keyword" >
    </div>
    <div class="search-content" ref="search" v-show="keyword">
       <ul>
            <li  class="search-item border-bottom"  v-for="item in list" :key="item.id" @click="handleCityClick(item.name)">
            {{item.name}}
            </li>
            <li class="search-item border-bottom" v-show="hasNoData">
            没有找到匹配数据
            </li>
      </ul>
    </div>
</div>
</template>

<script>
import { mapMutations } from 'vuex'
import Bscroll from 'better-scroll'
export default {
    name:'CitySearch',
    props:{
        cities:Object
    },
    data (){
        return{
            keyword:'',
            list:[],
            timer:null
        }
    },
    computed: {
        hasNoData () {
          return !this.list.length
        }
  },
  watch: {
    keyword () {
      if (this.timer) {
        clearTimeout(this.timer)
      }
      if (!this.keyword) {
        this.list = []
        return 
      }
      this.timer = setTimeout(() => {
        const result = []
        for (let i in this.cities) {
          this.cities[i].forEach((value) => {
            if (value.spell.indexOf(this.keyword) > -1 ||
              value.name.indexOf(this.keyword) > -1){
                result.push(value)
              }
          })
        }
        this.list = result
      },100)
    }
  },
  methods:{
      handleCityClick (city){
         
            this.$store.commit('changeCity',city)
             /* 
             this.keyword = ''
             this.$router.push('/')
             */
         }
  },
  mounted () {
    this.scroll = new Bscroll(this.$refs.search)
  }
}
</script>

<style scoped>
.search{
    height:36px;
   
}
 .search-input{
     padding-left:30%;
     width:65%;
     height:40px;
     position: absolute;
     bottom: 6px;
     left:8px;
     border:none;
     outline: none;
     border-radius: 5px;
 }
 .search-content{
    z-index:1;
    position:absolute;
    overflow:hidden;
    top:120px;
    left:0;
    right:0;
    bottom:0;
    background:#eee;
 }
       
   .search-item{
     line-height:30px;
      padding-left:5px;
      background:#ffffff;
      color:#666;
   }
      
 

</style>
